<template>
  <!-- 导航栏 -->
  <van-nav-bar
    title="标题"
    left-text="返回"
    right-text="管理"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
    style="position: relative"
  />
  <van-swipe-cell v-for="item in cartInfo">
    <!--     :num="item.num" -->
    <van-card
      :price="price(item.s_good.price, item.num)"
      :desc="item.s_good.desc"
      :title="item.s_good.name"
      class="goods-card"
      :thumb="item.s_good.s_goods_photos[0].path"
    />

    <van-stepper v-model="item.num" class="step" />

    <template #right>
      <van-button
        square
        text="删除"
        type="danger"
        class="delete-button"
        @click="delSingle(item.id)"
      />
    </template>
  </van-swipe-cell>
</template>

<script setup>
import { ref, computed } from 'vue';
import { getCartInfo, delCartSingle } from '@/service';
const cartInfo = ref([]);

const getCartInfoRequest = async () => {
  const res = await getCartInfo();
  cartInfo.value = res.result.rows;
  console.log(cartInfo.value);
};

const price = computed(() => {
  return (p, n) => {
    return p * n;
  };
});

const delSingle = async (id) => {
  await delCartSingle(id);
};
getCartInfoRequest();
</script>

<style lang="scss" scoped>
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}

.step {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 20px;
  margin-bottom: 10px;
}
</style>
